<template>
  <div class="row-right">
    <div class="layout" v-show="modalShow" @click.stop="modalShow=false">
      <div class="modal in">
        <div class="modal-dialog modal-sm" @click.stop="modalShow=true">
          <div class="modal-content">
            <div class="modal-body">
              <div style="margin-bottom:20px;">
                <input type="number" class="form-control" placeholder="请输入提现金额" v-model="money">
              </div>
              <div class="text-right">
                <button class="btn btn-default" style="margin-right:20px;">取消</button>
                <button class="btn btn-ghost" @click.stop="handleGetMoney()">提现</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row sec-mrb">
      <div class="col-xs-12">
        <div class="info-card">
          <div class="card-right">
            <div class="card-details row">
              <div class="card-item col-xs-12 col-sm-4">
                <h3>{{account.lastCount}}元</h3>
                <h4>账户余额</h4>
              </div>
              <div class="card-item col-xs-12 col-sm-4">
                <div class="img-box">
                  <img :src="'https://kegonghui.oss-cn-beijing.aliyuncs.com/'+userInfo.headimg+'?x-oss-process=image/circle,r_100'" alt="..." width="110" height="110" class="img-circle">
                </div>
                <p class="lead">{{userInfo.nickname}}</p>
              </div>
              <div class="card-item col-xs-12 col-sm-4">
                <h3>{{account.exportMoneyCount}}元</h3>
                <h4>已提现</h4>
              </div>
            </div>
            <div class="card-btn text-center">
              <!-- <button type="button" class="btn btn-success" style="margin-right: 40px;width: 100px">充值</button> -->
              <button type="button" class="btn btn-danger" style="width: 100px" @click="modalShow=true">提现</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row section-header">
      <div class="col-xs-12">
        <ul class="nav nav-pills">
          <li role="presentation" style="margin-right: 40px">
            <h4>
              <a href="javascript:;" class="text-black" @click="orderType=''">全部</a>
            </h4>
          </li>
          <li role="presentation" style="margin-right: 40px">
            <h4>
              <a href="javascript:;" class="text-black" @click="orderType='income'">收入</a>
            </h4>
          </li>
          <li role="presentation">
            <h4>
              <a href="javascript:;" class="text-black" @click="orderType='expenditure'">支出</a>
            </h4>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="table-responsive">
          <div class="file-table">
            <table class="table">
              <tr v-for="item in orderList" :key="item.id">
                <td>{{item.curriculumName}}</td>
                <td>{{timestampToTime(item.createTime)}}</td>
                <td>
                  <template v-if="userInfo.uid==item.fromId">
                    <span class="text-danger">-{{item.money}}元</span>
                  </template>
                  <template v-if="userInfo.uid==item.toId">
                    <span class="text-success">+{{item.money}}元</span>
                  </template>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="row text-center load-more" v-if="loadShow">
      <a href="javascript:;" @click="fetchMoreData()">加载更多</a>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
// @ is an alias to /src
import CourseItem from '@/components/Course-Item.vue'
import util from '@/assets/js/utils.js'
export default {
  name: 'course',
  components: {
    CourseItem
  },
  data () {
    return {
      // userInfo: {
      //   headimg: '',
      //   nickname: '',
      //   sex: '',
      //   mobile: '',
      //   email: '',
      //   isExpert: 0
      // },
      account:{},
      modalShow: false,
      money: 0, //提现金额
      orderList: [],
      loadShow: true,
      pageNum: 0,
      orderType: ''
    }
  },
  created () {
    this.fetchOrderList()
    this.fetchAccountInfo();
  },
  computed: {
    userInfo () {
      console.log(this.$store.state)
      return this.$store.state.userInfo
    }
  },
  watch: {
    orderType () {
      this.handleInitPage()
      this.fetchOrderList()
    }
  },
  methods: {
    handleInitPage () {
      this.orderList = []
      this.loadShow = true
      this.pageNum = 0
    },
    fetchAccountInfo () {
      let that = this
      axios
        .post('/pay/account', qs.stringify({}))
        .then(function (response) {
          if (response.data.suc == 200) {
            that.account = response.data.data
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    fetchOrderList () {
      //订单列表
      let that = this
      axios
        .post(
          '/pay/flow',
          qs.stringify({
            direction: that.orderType,
            from: that.pageNum
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            if (response.data.data.length <= 0) that.loadShow = false
            that.orderList = that.orderList.concat(response.data.data)
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    handleModalClose () {
      this.modalShow = false
    },
    handleGetMoney () {
      // 提现
      let that = this
      axios
        .post(
          '/pay/withdrawDeposit',
          qs.stringify({
            money: this.money
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            alert('提现成功，请耐心等待到账')
          } else if (response.data.errCode == 'ERROR_CODE_000002') {
            alert('输入金额错误')
          } else if (response.data.errCode == 'ERROR_CODE_200007') {
            alert('余额不足')
          } else if (response.data.errCode == 'ERROR_CODE_200008') {
            alert('需要绑定openid')
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    timestampToTime (time) {
      return util.timestampToTime(time)
    },
    fetchMoreData () {
      // 加载更多
      this.pageNum += 1
      this.fetchOrderList()
    }
  }
}
</script>
<style lang="scss" scoped>
.info-card {
  .card-right {
  }
  .card-details {
    .card-item {
      text-align: center;
      margin-bottom: 30px;
      h4 {
        font-weight: normal;
        color: #b8b8b8;
        font-size: 16px;
      }
      h3 {
        font-weight: normal;
        color: #212121;
        font-size: 32px;
        margin: 45px auto;
      }
      .img-box {
        margin-bottom: 12px;
      }
      .lead {
        color: #212121;
      }
    }
  }
  .card-btn {
  }
}
.section-header {
  margin-bottom: 20px !important;
}
</style>
